<template>
  <div>
    <div class="sort-box">
      <span>销量排序：</span>
      <div class="sort">
        <input type="radio" v-model="sort" name="sort" value="0" />全部
        <input type="radio" v-model="sort" name="sort" value="1" />降序
        <input type="radio" v-model="sort" name="sort" value="2" />升序
      </div>
    </div>
    <el-tabs>
      <el-tab-pane label="合伙人">
         <div class="sales-box">
          <div class="list-box">
            <div class="list-item" v-for="(item, index) in lists" :key="index">
              <div>{{ item.name }}</div>
            </div>
          </div>
          <div class="data-box" v-for="(item,index) in cityDatas" :key="index">
            <div class="province-data">{{item.province}}</div>
            <div class="city-data">{{item.city}}</div>
            <div class="sales-data" @click="showecharts($event)">{{item.sales}}</div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="大客户">
         <div class="sales-box">
          <div class="list-box">
            <div class="list-item" v-for="(item, index) in lists" :key="index">
              <div>{{ item.name }}</div>
            </div>
          </div>
          <div class="data-box" v-for="(item,index) in cityDatas" :key="index">
            <div class="province-data">{{item.province}}</div>
            <div class="city-data">{{item.city}}</div>
            <div class="sales-data" @click="showecharts($event)">{{item.sales}}</div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { Bus } from "../../Bus";
export default {
  data() {
    return {
      sort: "",
      lists: [],
      cityDatas: [],
      isshow:false,
    };
  },
  mounted() {
    Bus.$on("city-lists",(value)=>{
      this.lists = value;
    });
    Bus.$on("city-datas",(value)=>{
      this.cityDatas=value;
    })
  },
  methods:{
     showecharts(el){
      console.log(el.target.previousSibling.innerText);
      this.isshow = !this.isshow;
      Bus.$emit("showecharts",this.isshow);
    }
  }
};
</script>

<style lang="less" scoped>
.sort-box {
  display: flex;
  margin: 30px;
}
.el-tabs {
  margin-left: 10px;
  margin-right: 10px;
}
.list-box,
.data-box{
  width: 100%;
  display: flex;
}
.list-item,
.province-data,
.city-data,
.sales-data{
  width: 33.3%;
  height: 50px;
  line-height: 50px;
  border: 1px solid#000;
}
</style>>